<template>
	<view class="diy-notice" v-if="value">
		<text class="flag ns-border-color ns-text-color ns-font-size-sm"
			@click="$navTo('pages/article/index')">公告</text>
		<view class="main-wrap">
			<view v-if="scroll_way == 1" class="notice"
				:style="{ background: background, backgroundColor: value.bg_color }">
				<view id="notice-con" class="notice-item ns-font-size-base" @click="goDetail(value[0])"
					:style="{ left: moveLeft + 'px', color: value.text_color, fontSize: value.font_size * 2 + 'rpx' }">
					{{ value[0].title }}
				</view>
			</view>
			<view v-else-if="scroll_way == 2" class="uni-swiper-msg"
				:style="{ background: background, backgroundColor: value.bg_color }">
				<swiper vertical="true" autoplay="true" circular="true">
					<swiper-item v-for="(item, index) in value" :key="index"
						:class="text_align == 1 ? 'text-left' : text_align == 2 ? 'text-center' : 'text-right'">
						<text @click="goDetail(item)" class="beyond-hiding"
							:style="{ color: value.text_color, fontSize: value.font_size * 2 + 'rpx' }">
							{{ item.title }}
						</text>
					</swiper-item>
				</swiper>
			</view>
			<view v-else-if="scroll_way == 0" class="notice beyond-hiding"
				:class="text_align == 1 ? 'text-left' : text_align == 2 ? 'text-center' : 'text-right'"
				:style="{ background: background, backgroundColor: value.bg_color }">
				<view class="notice-item ns-font-size-base" @click="goDetail(value[0])"
					:style="{ color: value.text_color, fontSize: value.font_size * 2 + 'rpx' }">
					{{ value[0].title }}
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	// 公告
	export default {
		name: 'lrw-m_article',
		props: {
			value: {
				type: Array,
				default: () => {
					return {
						border_color: '#e5e5e5',
						bg_color: '#ffffff',
						// scroll_way: 2,
						text_color: '#111',
						font_size: 14,
						// text_align: 1,
						bg_img: ''
					};
				}
			}
		},
		data() {
			return {
				moveLeft: 0,
				screenWidth: 0,
				domWidth: 0,
				background: '',
				scroll_way: 2,
				text_align: 1
			};
		},
		created() {
			// if (this.value.bg_img != '') {
			// 	this.background = 'url(' + this.$util.img(value.bg_img) + ') no-repeat center / cover';
			// }
			// console.info(this.value)
		},
		mounted() {
			if (this.scroll_way == 1) {
				this.getScreenWidth();
				this.horizontalRolling();
			} else if (this.scroll_way == 2) {
				this.longitudinalRolling();
			}
		},
		methods: {
			goDetail: function(e) {
				console.log(e.article_id);
				let articleId = e.article_id;
				this.$navTo('pages/article/detail', {articleId});
			},
			/* 链接跳转 */
			redirectTo(link) {
				this.$emit('redirectTo', link);
			},
			/* 纵向滚动 */
			longitudinalRolling() {
				if (this.value.length == 1) {
					this.value.push(this.value[0]);
				}
			},
			/* 横向滚动 */
			horizontalRolling() {
				setInterval(() => {
					this.moveLeft--;
					if (this.moveLeft <= this.domWidth) {
						this.moveLeft = this.screenWidth;
					}
				}, 20);
			},
			getScreenWidth() {
				/* 获取屏幕宽度 */
				this.screenWidth = uni.getSystemInfoSync().windowWidth;

				/* 横向滚动 判断对其方式  1表示向左对其  2表示居中  3表示向右对齐*/
				if (this.text_align == 1) {
					this.moveLeft = 0;
				} else if (this.text_align == 2) {
					this.moveLeft = this.screenWidth / 2;
				} else if (this.text_align == 3) {
					this.moveLeft = this.screenWidth;
				}

				/* 获取内容宽度 */
				const query = uni.createSelectorQuery().in(this);
				query
					.select('#notice-con')
					.boundingClientRect(data => {
						this.domWidth = data.width;
					})
					.exec();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.diy-notice {
		padding: 20rpx;
		line-height: 54rpx;
		background-color: #fff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 54rpx;
		overflow: hidden;
		border-bottom: 1px solid #F4F5F6;
	}

	.diy-notice .main-wrap {
		width: 85%;
	}

	.diy-notice .flag {
		margin-right: 20rpx;
		float: left;
	}

	.uni-swiper-msg {
		padding: 0;
	}

	.notice {
		position: relative;
		/* height: 60rpx; */
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.notice .notice-item {
		display: inline-block;
		position: relative;
		white-space: nowrap;
	}

	.beyond-hiding {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.text-left {
		text-align: left;
	}

	.text-center {
		text-align: center;
	}

	.text-right {
		text-align: right;
	}
</style>
